<template>
    <div id='product'>
        <P></P>
        <!-- {{value}} -->
        <div class="row">
            <div class="grid-content bg-purple">
                <el-select v-model="value" placeholder="按订单号查询">
                    <el-option label="按订单号查询" value="orderNo"></el-option>
                </el-select>
                <el-input style="height:40px;" v-model="input" placeholder="订单号" clearable @clear="clear"></el-input>
                <el-button style="height:40px; margin-top:2px; margin-left:10px;" @click="sear">查询</el-button>
            </div>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="orderNo" label="订单号">
            </el-table-column>
            <el-table-column label="收件人" prop="receiverName">
            </el-table-column>
            <el-table-column prop="statusDesc" label="订单状态">
            </el-table-column>
            <el-table-column label="订单总价">
                <template v-slot="scope">
                    {{'￥'+scope.row.payment}}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <!-- <el-table-column label="注册时间" prop="createTime" :formatter="formatTime"></el-table-column> -->
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Paginations v-show="flag" :obj="obj" @pagenum="handleCurrentChange" @pagesize="handleSizeChange"></Paginations>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Table,
        TableColumn,
        Tag,
        Button,
        Row,
        Col,
        Input,
        Select,
        Option,
        Message,
    } from 'element-ui'
    import {
        orderList,
        orderSearch
    } from '../../api';
    Vue.prototype.$message = Message;
    import P from './P.vue';
    import Paginations from './Paginations.vue';

    export default {
        components: {
            Paginations,
            P,
            'el-table': Table,
            'el-table-column': TableColumn,
            'el-tag': Tag,
            'el-button': Button,
            'el-row': Row,
            'el-col': Col,
            'el-select': Select,
            'el-input': Input,
            'el-option': Option,
        },
        data() {
            return {
                obj: {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                flag: true,
                tableData: [],
                input: '',
                value: 'orderNo',
                flag1: false
            };
        },
        methods: {
            clear() {
                console.log(1);
                this.flag = true
                this.getUser()
            },
            sear() {
                console.log(1);
                var obj = {
                    listType: 'search',
                    pageNum: this.obj.pageNum,
                    orderNo: this.input
                }
                orderSearch(obj).then(res => {
                    // console.log(res);
                    this.tableData = res.data.data.list
                    this.flag1 = false
                })
            },
            handleClick(row) {
                sessionStorage.setItem('menu', '订单详情')
                this.$router.push('/order/detail?orderNo=' + row.orderNo)
            },

            async getUser() {
                let {
                    data: res
                } = await orderList(this.obj)
                this.tableData = res.data.list
                this.obj.total = res.data.total
            },
            handleSizeChange(val) {
                if (this.flag1) {
                    this.obj.pageSize = val
                    this.sear()
                } else {
                    this.obj.pageSize = val
                    this.getUser(this.obj.pageNum)
                }
            },
            handleCurrentChange(val) {
                if (this.flag1) {
                    this.obj.pageNum = val
                    this.sear()
                } else {
                    this.obj.pageNum = val
                    this.getUser(this.obj.pageNum)
                }
            },
            formatTime(row, column, cellValue, index) {
                // console.log(row.createTime);
                return Time(row.createTime)
            },
        },
        mounted() {
            this.getUser()
        },
        computed: {

        }
    }
</script>
<style lang='scss' scoped>
    #product {
        position: relative;

        .addbtn {
            position: absolute;
            right: 10px;
            top: 20px;
            font-size: 20px;
            background: #337ab7;
        }

        .row {
            height: 50px;
            padding-left: 10px;

            .el-cascader {
                height: 40px;
            }

            .grid-content {
                height: 0;
                background: transparent;
                display: flex;

                .el-input {
                    width: 200px;
                    margin-left: 20px;
                    margin-top: 2px;
                }
            }
        }
    }
</style>